iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 19
0
Mobile Development

Android 從零開始系列 第 19

[Day19] PopupWindow彈出視窗

  • 分享至 

  • xImage
  •  

在APP中經常會有彈出視窗的操作出現。實現彈出視窗有兩種方法,一種是之前教過的Dialog,或者是PopupWindow,這里就先忽略之前教過的Dialog。PopupWindow彈出視窗可以設計在各種位置出現,在指定View的上、下、左、右等...。

XML

先簡單設計出一個主頁面,只要寫出一個Button作為觸發 PopupWindow的元件就可以了。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="按鈕"/>
</RelativeLayout>

主頁面完成後創建並設計出第二個畫面作為待會PopupWindow彈出要顯示的內容,範例命名為popup_window.xml。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:orientation="vertical">
    <LinearLayout
        android:id="@+id/popLayout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:gravity="center_horizontal"
        android:orientation="vertical">
        <Button
            android:id="@+id/okBtn"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="#FFFFFF"
            android:text="確定"
            android:textSize="18sp" />
    </LinearLayout>
</RelativeLayout>

JAVA程式碼

設計完XML就可以來編輯程式的部分了,我們要做一個按鈕的監聽器並在觸發事件中寫入彈出PopupWindow。
PopupWindow的部分我們要設計一個繼承PopupWindow的Class。
PopupWindow中有幾個較為重要的設定如下:
popupWindow.showAtLocation(view, Gravity.CENTER, 0, 0);參數可用來決定彈出的位置
setOutsideTouchable(true);用來決定外部可被點擊,外部點擊的部分也可以設個監聽器來決定被點擊後的觸發事件。
dismiss();代表銷毀PopupWindow視窗

public class MainActivity extends AppCompatActivity {
    Button button;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getSupportActionBar().hide();
        setContentView(R.layout.activity_main);

        button = findViewById(R.id.button);
        //指定監聽的物件
        button.setOnClickListener(listener);
    }

    //監聽器
    Button.OnClickListener listener= new Button.OnClickListener() {
        @Override
        public void onClick(View v) {
            popupWindow popupWindow = new popupWindow(MainActivity.this);
            View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.popup_window, null);
            popupWindow.showAtLocation(view, Gravity.CENTER, 0, 0);
        }
    };

    public class popupWindow extends PopupWindow implements View.OnClickListener {
        View view;
        Button okBtn;

        public popupWindow(Context mContext) {
            this.view = LayoutInflater.from(mContext).inflate(R.layout.popup_window, null);
            okBtn = view.findViewById(R.id.okBtn);
            this.setOutsideTouchable(true);
            this.view.setOnTouchListener(new View.OnTouchListener() {
                public boolean onTouch(View v, MotionEvent event) {
                    int height = view.findViewById(R.id.popLayout).getTop();
                    int y = (int) event.getY();
                    if (event.getAction() == MotionEvent.ACTION_UP) {
                        if (y < height) {
                            dismiss();
                        }
                    }
                    return true;
                }
            });

            this.setContentView(this.view);
            this.setHeight(RelativeLayout.LayoutParams.MATCH_PARENT);
            this.setWidth(RelativeLayout.LayoutParams.MATCH_PARENT);
            this.setFocusable(true);
            ColorDrawable dw = new ColorDrawable(0xb0000000);
            this.setBackgroundDrawable(dw);
            okBtn.setOnClickListener(this);
        }

        public void onClick(View V){
            int id=V.getId();
            switch(id){
                case R.id.okBtn:
                    Toast.makeText(MainActivity.this,"點擊確定", Toast.LENGTH_SHORT).show();
                    break;
            }
        }
    }
}

成果

圖片


上一篇
[Day18] ViewPager-標籤滑動頁面
下一篇
[Day20] ScrollView滾動視圖
系列文
Android 從零開始30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言